<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    v-for  列表渲染   目标位置  需要循环标签上

    为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

-->
<div id="app">
    <ul>
        <li v-for="char in info">{{char}}</li>
    </ul>

    <ul>
        <li v-for="(char,index) in info" :key="index">{{char}} -- {{index}}</li>
    </ul>

    <ul>
        <li v-for="name in names">{{name}}</li>
    </ul>


    <ul>
        <li v-for="(name,index) in names" :key="index">{{name}} -- {{index}}</li>
    </ul>


    <ul>
        <li v-for="val in student">{{val}}</li>
    </ul>

    <ul>
        <li v-for="(val,attr) in student">{{attr}}:{{val}}</li>
    </ul>

<table border="1" width="100%">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tbody>
            <tr v-for="student in students">
                <td v-for="val in student">{{val}}</td>
            </tr>
    </tbody>
</table>


</div>


<script>

    let vm = new Vue({
        el: '#app',
        data: {
            info: 'hel',
            names: ['admin', 'super', 'xiaoming'],
            student: {
                name: 'admin',
                age: 20,
                sex: '男'
            },
            students: [
                {
                    name: 'admin',
                    age: 20,
                    sex: '男'
                },
                {
                    name: 'admin',
                    age: 20,
                    sex: '男'
                },
                {
                    name: 'admin',
                    age: 20,
                    sex: '男'
                }
            ]
        }
    })
</script>
</body>
</html>